<template>
  <div>
    <el-button-group
      class="btn-group lowcode-transition"
      :class="{ 'btn-group-focus': isFocus }"
    >
      <template v-for="(item, index) in modeList" :key="item.label">
        <el-tooltip effect="dark" :content="item.label" placement="top">
          <el-button
            :key="index"
            size="small"
            :icon="item.icon"
            :type="mode === item.value ? 'primary' : 'default'"
            @click="handleChangeMode(item.value)"
          >
          </el-button>
        </el-tooltip>
      </template>
    </el-button-group>
  </div>
</template>

<script setup name="ChartChange">
import { defineProps, defineEmits } from "vue"

const props = defineProps({
  modeList: {
    type: Array,
    default: () => [],
  },
  isFocus: {
    type: Boolean,
    default: false,
  },
  mode: {
    type: String,
    default: "",
  },
})

const emit = defineEmits(["handleChange"])

const handleChangeMode = value => {
  emit("handleChange", value)
}
</script>

<style lang="scss" scoped>
.btn-group {
  width: 60px;
  overflow: hidden;
  .el-button {
    &.el-button-primary {
      color: #409eff;
      border-color: #c6e2ff;
      &:hover,
      &:focus {
        border-color: #3a8ee6;
      }
    }
    &.el-button--small {
      padding: 0;
      min-width: 30px;
      height: 28px;
      font-size: 12px;
      line-height: 26px;
    }

    i {
      font-size: 14px;
    }
  }
  &.btn-group-focus {
    width: 0px;
  }
}
</style>
